Шрифт
Основной шрифт в интерфейсах
Цифрового университета — Segoe UI.
Заголовки
SP1Bold 700
56/64/32
SP2Bold 700
48/56/28
H1Bold 700
40/48/24
H2Semibold 600
36/44/22
H3Semibold 600
32/40/20
H4Semibold 600
28/36/18
.cds-sp1
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 56px;
line-height: 64px;
paragraph: 32px;
.cds-sp2
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 56px;
paragraph: 28px;
.cds-h1
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 48px;
paragraph: 24px;
.cds-h2
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 44px;
paragraph: 22px;
.cds-h3
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
paragraph: 20px;
.cds-h4
font-family: Segoe UI, sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 36px;
paragraph: 18px;
Основной и вспомогательный текст
SubtitleRegular 400
24/34/17
Subtitle text
Body-textBold 700
18/26/13
Body-text-bold
Small-text-boldBold 700
14/22/11
Small-text-bold
Caption2-textRegular 400
10/22/11
Caption2-text
Body-textRegular 400
18/26/13
Body-text
Small-textRegular 400
14/22/11
Small-text
Caption-textRegular 400
12/22/11
Caption-text
.cds-subtitle
font-family: Segoe UI, sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 34px;
paragraph: 17px;
.cds-body-text
font-family: Segoe UI, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 26px;
paragraph: 13px;
.cds-body-text-bold
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 26px;
paragraph: 13px;
.cds-small-text
font-family: Segoe UI, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
paragraph: 11px;
.cds-small-text-bold
font-family: Segoe UI, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
paragraph: 11px;
.cds-caption
font-family: Segoe UI, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 22px;
paragraph: 11px;
.cds-caption2
font-family: Segoe UI, sans-serif;
font-weight: 400;
font-size: 10px;
line-height: 22px;
paragraph: 11px;
Основной текст
Основной размер шрифта на десктопе — 18 пунктов, на смартфоне — 16. Текст такого размера без усилий считывается даже людьми, у которых проблемы со зрением.
Для навигации используется 16 размер текста. Он хорошо читаем в коротких текстах и не отвлекает от блока с основной информацией.
Для необязательных к прочтению текстов допустимо использовать шрифт размером не менее 14 пунктов.
Текстовые блоки должны иметь отступы по 8px сверху и снизу. Помимо этого, дополнительно снизу блока должен быть отступ в 20px.
Длина строки
Длина строки для комфортного чтения c экрана должна равняться 40-80 знакам текста, включая пробелы.
Слишком длинные строки усложняют считывание текста: дочитав до конца строки, сложно быстро найти взглядом начало следующей.
Короткие строки вынуждают перескакивать на следующую строку слишком часто. Единственный случай, когда короткие строки приемлемы — это малое количество текста.
Высота строки
Высота строки численно равна расстоянию между базовыми линиями шрифта.
Оптимальное значение высоты строки — 1,5 размера шрифта, которым набран текст. То есть, для шрифта 14pt это 14 * 1,5 = 21pt. Для заголовков действует соотношение 1,25.
Поскольку мы работаем по 8-пиксельной сетке, то округляем полученное число до ближайшего кратного 8.
ФИРМЕННЫЙ ЦВЕТ
.cds-color-primary
#1946BA
СВЕТЛЫЕ ОТТЕНКИ
.cds-color-primary-100
#D1DAF1.cds-color-primary-300
#7590D6ТЕМНЫЕ ОТТЕНКИ
.cds-color-primary-500
#143895.cds-color-primary-700
#0F2A70ОБВОДКА
ФОН
.cds-color-light
#E8E8E8.cds-color-light-700
#EEEEEE.cds-color-light-500
#E8E8E8.cds-color-light-300
#E8E8E8.cds-color-light-100
#E8E8E8ТЕКСТ
.cds-color-dark
#262626.cds-color-dark-700
#4D4D4D.cds-color-dark-500
#999999.cds-color-dark-300
#CCCCCCДля заголовков в дизайне следует использовать #262626 или 85% черного.
В качестве цвета для основного текста используется #4D4D4D или 70% черного.
Первый дополнительный цвет используется для подписей, комментариев, заголовков таблиц.
Второй дополнительный оттенок для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.
Фирменный цвет сервиса также можно использовать вместо стандартного цвета ссылок, а также для обозначения информационных блоков/иконов
Для этого фирменный цвет:
не должен быть похож на красный, зеленый и оранжевый, чтобы не нести дополнительный смысл;
должен быть насыщенным: контрастным фону и тексту.
ЖЕЛТЫЙ
.cds-color-warning
#F69C00.cds-color-warning-300
#FAC466.cds-color-warning-100
#FDEBCCЧтобы привлечь внимание пользователя к важной информации, касающейся его работы в интерфейсе, используйте желто-оранжевый цвет.
КРАСНЫЙ
.cds-color-fail
#D9364B.cds-color-fail-300
#E88693.cds-color-fail-100
#F7D7DBКрасный — для сообщений об ошибке, невозможности продолжить, неудачном завершении.
ЗЕЛЕНЫЙ
.cds-color-success
#D9364B.cds-color-success-300
#E88693.cds-color-success-100
#F7D7DBЗеленый — для сообщений об успехе, удачном завершении.
Forms
.cds-form-control
border-radius: 4px
padding: 16px
border: none
.cds-shadow
.cds-form-control-fail
border-radius: 4px
padding: 16px
border: none
.cds-color-fail-100
.cds-shadow-fail
.cds-form-control-success
border-radius: 4px
padding: 16px
border: none
.cds-color-success-100
.cds-shadow-success
.cds-form-control
border-radius: 4px
padding: 16px
border: none
.cds-shadow-active
.cds-form-control-fail-active
border-radius: 4px
padding: 16px
border: none
.cds-color-fail-100
.cds-shadow-fail-active
.cds-form-control-disabled
border-radius: 4px
padding: 16px
border: none
.cds-bg-light-700
Shadow
.cds-shadow
box-shadow: 0px 4px 4px 0px #F8F8F8;
box-shadow: 0px 4px 16px 0px #F1F1F1;
.cds-shadow-active
box-shadow: 0px 4px 4px 0px #F8F8F8;
box-shadow: 0px 4px 24px 0px #E3E3E3;
.cds-shadow-fail
box-shadow: 0px 4px 4px 0px #FEF9F9;
box-shadow: 0px 4px 16px 0px #FEFCFC;
.cds-shadow-fail-active
box-shadow: 0px 4px 4px 0px #FFFDFE;
box-shadow: 0px 4px 24px 0px #FCF1F3;
.cds-shadow-success
box-shadow: 0px 4px 16px 0px #F9FCF8;
box-shadow: 0px 4px 8px 0px #FCFDFC;
.cds-shadow-success-active
box-shadow: 0px 4px 4px 0px #F5FAF4;
box-shadow: 0px 4px 4px 0px #F5FAF4;
.cds-form-control.cds-form-control-attach
.cds-body-text
.cds-color-primary
.cds-color-dark-700
.cds-form-control.cds-form-control-attach-help
.cds-body-text
.cds-color-primary
.cds-color-dark-700
.cds-small-text
.cds-color-dark-300
.cds-form-control.cds-form-control-attach-icon
.cds-ipack-doc-add
.cds-color-light-100
Загрузка
.cds-form-control.cds-form-control-attach-progress
.cds-body-text
.cds-color-dark-700
.cds-progress
Загрузка завершена
.cds-form-control.cds-form-control-attach-success
.cds-body-text
.cds-color-dark-700
.cds-progress.cds-progress-success
Загрузка
Произошла ошибка, попробуйте загрузить файл повторно
.cds-form-control.cds-form-control-attach-fail
.cds-body-text
.cds-color-dark-700
.cds-progress.cds-progress-fail
.cds-small-text
.cds-color-fail
Загрузка
Файл весит больше 10 МБ
.cds-form-control.cds-form-control-attach-fail
.cds-body-text
.cds-color-dark-700
.cds-small-text
.cds-color-fail
.cds-badge-pill
.cds-small-text
.cds-badge-pill.cds-badge-primary
.cds-badge-pill.cds-badge-secondary
.cds-badge-pill.cds-badge-disable
.cds-badge-pill.cds-badge-hover
bordered: 1px
bordered-color: .cds-color-primary-100
.cds-shadow
.cds-tagbutton :chosen
.cds-form-control-chosen
background-color: .cds-color-primary
shadow: none
.cds-ipack-close
.cds-color-light-100
text-color: .cds-color-light-100
.cds-tagbutton :hover
.cds-form-control-hover
background-color: .cds-color-light-700
.cds-shadow
.cds-ipack-close
.cds-color-dark
.cds-tagbutton
.cds-form-control-active
.padding: 1px 8px
.cds-ipack-close
.cds-color-dark-500
.cds-tagbutton :click
.cds-form-control-hover
background-color: .cds-color-light-700
.cds-ipack-close
.cds-color-light-100
text-color: .cds-color-light-100
.cds-select
.cds-ipack-arrow
.cds-body-text
.cds-color-dark-500
.cds-select.cds-select
.cds-form-control
.cds-select.cds-select-hover
.cds-form-control-active
.cds-select.cds-select-active :active
ul.cds-list.cds-list-flush
.cds-form-control-active
.cds-body-text
.cds-color-dark-700
.cds-select.cds-select-active :hover
ul.cds-list.cds-list-flush :selected
.cds-ipack-checkmark
li.cds-item-hover
background-color: .cds-color-light-700
.cds-select.cds-select-active :selected
ul.cds-list.cds-list-flush :selected
.cds-ipack-checkmark
.cds-select.cds-select-active
.cds-form-control-active
.cds-small-text
.cds-color-dark-500
.cds-body-text
.cds-color-dark-700
.cds-ipack-close
.cds-dropdown
.cds-form-control
.cds-body-text
.cds-color-dark-700
.cds-ipack-arrow
.cds-color-primary
.cds-body-text
.cds-color-dark
.cds-dropdown :disabled
.cds-form-control-disabled
.cds-body-text
.cds-color-dark-500
.cds-ipack-arrow
.cds-color-dark-500
.cds-body-text
.cds-color-dark
.cds-dropdown.cds-dropdown-list
.cds-form-control-active
ul.cds-list.cds-list-flush
.cds-form-control-active
border-buttom: none
.cds-dropdown :selected
.background-color: .cds-color-primary
text-color: .cds-color-light-100
.cds-input
.cds-form-control
.cds-body-text
.cds-color-dark-300
.cds-input-disabled
.cds-form-control-disabled
.cds-body-text
.cds-color-dark-300
.cds-input-success
.cds-form-control-success
.cds-small-text
.cds-color-dark-500
.cds-body-text
.cds-color-dark-700
.cds-ipack-checkmark
.cds-color-success
.cds-input-active
.cds-form-control-active
.cds-small-text
.cds-color-light
.cds-body-text
.cds-color-dark-700
.cds-input-disabled
.cds-form-control-disabled
.cds-small-text
.cds-color-dark-300
.cds-body-text
.cds-color-dark-500
.cds-input
.cds-form-control
.cds-body-text
.cds-color-dark-300
.cds-small-text
.cds-color-dark-500
.cds-input-fail-tip
.cds-form-control-fail
.cds-body-text
.cds-color-dark-700
.cds-small-text
.cds-color-fail
.cds-input-fail-active-tip
.cds-form-control-fail-active
.cds-small-text
.cds-color-dark-500
.cds-body-text
.cds-color-dark-700
.cds-small-text
.cds-color-fail
.cds-input-phone
.cds-form-control
.cds-body-text
.cds-color-dark-300
.cds-flag-ru
.cds-input-phone
.cds-form-control
.cds-body-text
.cds-color-dark-700
.cds-flag-ru
.cds-input-icon
.cds-form-control
.cds-body-text
.cds-color-dark-300
.cds-ipack-info
.cds-input-icon-active
.cds-form-control-active
.cds-small-text
.cds-color-dark-300
.cds-body-text
.cds-color-dark-700
.cds-ipack-info
.cds-input-calendar
.cds-form-control
.cds-body-text
.cds-color-dark-300
.cds-ipack-calendar
.cds-color-dark-300
.cds-input-calendar-active
.cds-form-control-active
.cds-body-text
.cds-color-dark-700
.cds-ipack-calendar
.cds-color-dark-700
.cds-form-control-fail
.cds-form-control-active
.cds-body-text
.cds-color-dark-700
.cds-ipack-calendar
.cds-color-fail
.cds-small-text
.cds-color-fail
.cds-form-control-success
.cds-form-control-active
.cds-body-text
.cds-color-dark-700
.cds-ipack-calendar
.cds-color-success
.cds-alert
border-right: 4px;
padding: 16px;
border: none;
.cds-shadow
.cds-ipack-delete
.cds-color-dark-500
.cds-alert.cds-alert
.cds-body-text
.cds-color-dark-700
.cds-ipack-delete
.cds-color-dark-500
.cds-alert.cds-info
.cds-body-text
.cds-color-dark-700
.cds-ipack-delete
.cds-color-dark-500
.cds-ipack-info
.cds-alert.cds-warning
.cds-body-text
.cds-color-warning
.cds-ipack-delete
.cds-color-dark-500
.cds-ipack-warning
.cds-color-warning
.cds-alert.cds-fail
.cds-body-text
.cds-color-fail
.cds-ipack-delete
.cds-color-dark-500
.cds-ipack-warning
.cds-color-fail
.cds-alert.cds-success
.cds-body-text
.cds-color-success
.cds-ipack-delete
.cds-color-dark-500
.cds-ipack-checkmark
.cds-color-success
.cds-interactive-plate
.cds-form-control-active
padding: 16px 36px 16px 16px
.cds-body-text
.cds-color-dark-700
.cds-ipack-arrowdown
.cds-color-dark-500
.cds-interactive-plate.cds-interactive-plate-text
.cds-small-text
.cds-color-dark-500
.cds-text-area
border-radius: 4px;
padding: 8px 16px;
border: 1px;
.cds-body-text
.cds-tooltip
.cds-small-text
.cds-tooltip.cds-tooltip-on-top-left
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-on-top-right
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-on-bottom-right
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-on-bottom-left
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-on-left
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-on-right
.cds-form-control-active
text-color: .cds-color-dark
.cds-tooltip.cds-tooltip-warning
text-color: .cds-color-warning
background-color: .cds-color-warning-100
.cds-tooltip.cds-tooltip-warning
.cds-form-control-fail-active
text-color: .cds-color-fail
.cds-tooltip.cds-tooltip-on-top-left
.cds-form-control-success
text-color: .cds-color-success
| Label | Label + Icon | Icon | Icon circle | |
|---|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
|
| Hover |
Кнопка
|
Кнопка
|
|
|
| Active |
Кнопка
|
Кнопка
|
|
|
| Disabled |
Кнопка
|
Кнопка
|
|
| Label | Label + Icon | Icon | Icon circle | |
|---|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
|
| Hover |
Кнопка
|
Кнопка
|
|
|
| Active |
Кнопка
|
Кнопка
|
|
|
| Disabled |
Кнопка
|
Кнопка
|
|
| Label | Label + Icon | Icon | Icon circle | |
|---|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
|
| Hover |
Кнопка
|
Кнопка
|
|
|
| Active |
Кнопка
|
Кнопка
|
|
|
| Disabled |
Кнопка
|
Кнопка
|
|
| Label | Label + Icon | Icon | Icon circle | |
|---|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
|
| Hover |
Кнопка
|
Кнопка
|
|
|
| Active |
Кнопка
|
Кнопка
|
|
|
| Disabled |
Кнопка
|
Кнопка
|
|
| Label | Label + Icon | Icon | |
|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
| Hover |
Кнопка
|
Кнопка
|
|
| Active |
Кнопка
|
Кнопка
|
|
| Disabled |
Кнопка
|
Кнопка
|
| Label | Label + Icon | Icon | |
|---|---|---|---|
| Default |
Кнопка
|
Кнопка
|
|
| Hover |
Кнопка
|
Кнопка
|
|
| Active |
Кнопка
|
Кнопка
|
|
| Disabled |
Кнопка
|
Кнопка
|